<template>
  <div class="layout wh-full" :class="classObj">
    <Sidebar class="sidebar-container" />
    <div :class="{ hasTagsView: showTagsView }" class="main-container">
      <div :class="{ 'fixed-header': fixedHeader }">
        <Navbar />
        <TagsView v-if="showTagsView" />
      </div>
      <div class="content">
        <AppMain />
      </div>
    </div>
  </div>
</template>
<script setup>
// import Sidebar from './Sidebar/index.vue'
// import Navbar from './Navbar/index.vue'
// import TagsView from './TagsView/index.vue'
// import AppMain from './AppMain/index.vue'
import { useAppStore, useSettingsStore } from "@/store"

const appStore = useAppStore()
const settingsStore = useSettingsStore()

const isOpenSidebar = computed(() => appStore.sidebar.opened)
const fixedHeader = computed(() => settingsStore.fixedHeader); // 是否固定header
const showTagsView = computed(() => settingsStore.tagsView); // 是否显示tagsView

const route = useRoute()

const classObj = computed(() => ({
  hideSidebar: !appStore.sidebar.opened,
  openSidebar: appStore.sidebar.opened,
  [`layout-${settingsStore.layout}`]: true
}));

watch(route, () => {
  if (isOpenSidebar.value) {
    // appStore.closeSideBar()
  }
})
</script>

<style lang="scss" scoped>
.layout {
  background:#f5f5f5;
  .sidebar-container {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 999;
    width: $sidebar-width;
    background-color: $menu-background;
    transition: width 0.28s;

    :deep(.el-menu) {
      border: none;
    }
  }
  .main-container {
    position: relative;
    height: 100%;
    margin-left: $sidebar-width;
    overflow-y: auto;
    transition: margin-left 0.28s;

    .fixed-header {
      position: sticky;
      top: 0;
      z-index: 9;
      transition: width 0.28s;
    }
  }
  .content {
    height: calc(100% - $navbar-height); // 减去导航栏高度
  }
  .hasTagsView {
    .content {
      height: calc(100% - $navbar-height - $tags-view-height);
    }
  }
}
.hideSidebar {
  .main-container {
    margin-left: $sidebar-width-collapsed;
  }
}

.layout-left.hideSidebar {
  .sidebar-container {
    width: $sidebar-width-collapsed !important;
  }

  .main-container {
    margin-left: $sidebar-width-collapsed;
  }
}
</style>
